﻿body
{  
  background: #70C1CF;
  background: -moz-linear-gradient(top, #70C1CF, #70C1CF 20%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#70C1CF), color-stop(20%, #0F7A8C), color-stop(60%, #70C1CF), color-stop(100%, #0F7A8C));
  color: #fff;
}
#header
{
  margin: 0px auto;
  height: 80px;
  padding-top: 20px;
  background: #70C1CF;
  background: -moz-linear-gradient(top, #70C1CF, #fff 8%, #3AF5FC 60%, #178093 100%);  
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#70C1CF), color-stop(8%, #fff), color-stop(60%, #3AF5FC), color-stop(100%, #178093));
}
#header a
{
  float: left;
  margin: 0px 12px;
}
#header h1
{
  color: #560F0F;
}
#logo
{
  height: 53px;
  float: left;
  margin-left: 10px;
  background-image: url(images/logo.png);
  background-color: transparent;
  width: 248px;
}
#newGame
{
  width: 170px;
  background: #F9B041;
  background: -moz-linear-gradient(top, #F9B041, #E28B2A 92%, #fff 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#F9B041), color-stop(92%, #E28B2A), color-stop(100%, #fff));
}
#currentGames
{
  background: #F9B041;
  width: 200px;
  background: -moz-linear-gradient(top, #D91C5C, #B9164D 92%, #fff 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#D91C5C), color-stop(92%, #B9164D), color-stop(100%, #fff));
}
.container
{
  height: 640px;
  margin: 0px auto;
  color: #fff;
}
#left
{
  float: left; width: 80px;
}

#main
{
  float: left;
}
.canvasContainer
{
  width: 450px; height:450px; 
  background-color: #fff;
  border: 5px outset #560F0F;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.paletteItem
{
  width: 45px;
  height: 45px;
  margin: 5px 0px 5px 8px;
  background: -moz-linear-gradient(top, #dedede, white 8%, #4FADBD 20%);  
  background: -webkit-gradient(linear, 0 0, 0 8%, from(transparent), color-stop(8%, white), color-stop(100%, transparent));
}
.paletteItem_Selected
{
  background-image: url(images/select.png);
  background-position: center; 
  background-repeat: no-repeat;
}
#inputmessage
{
  height: 30px;
  padding: 0px 10px;
}
#message
{
  width: 140px;
  height: 35px;
  font-size: 18px;
  line-height: 18px;
  padding: 0px 10px;
}


#right
{
  width: 200px; 
  float: left;
  height: 530px;
}

.userinfo
{
  height: 100px;
  overflow: hidden;
}

#onlineUsers
{
  height: 230px;  
}

ul#nicknames
{
  padding-left: 0px;
}

ul#nicknames li
{
  list-style-type: none;
  height: 30px;
  display: block;
  width: 210px;
  border-top: solid 2px #eee;
  border-bottom: solid 1px #222;
}

ul#nicknames li div
{
  float: left;height: 30px;overflow: hidden;
}
ul#nicknames li .owner
{
  background-image: url(images/owner.png);
  width: 17px; height: 24px;
  background-size: 100%;
  margin: 3px;
}
ul#nicknames li .normal
{
  width: 23px;
}
ul#nicknames li .drawer
{
  background-image: url(images/drawer.png);
  width: 30px;
}
ul#nicknames li .player
{
  width: 30px;
}
ul#nicknames li .ready
{
  background-image: url(images/ready.png);
  width: 30px;
}
ul#nicknames li .name
{
  width: 117px;
  height: 26px;  
  padding: 2px 5px;
}

table#userGrid
{
  border: none; width: 624px;
}
table#userGrid td
{
  width: 180px; height: 200px;
  background: #70C1CF;
  background: -moz-linear-gradient(top, #70C1CF, #70C1CF 20%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#70C1CF), color-stop(20%, #0F7A8C), color-stop(60%, #70C1CF), color-stop(100%, #0F7A8C));
}

table#userGrid td img
{
  margin: 0px 10px; border: none;
}

table#userGrid td .info
{
  text-align: center;
  background: #70C1CF;
  color: #fff;
  font-weight: bold;
}

#mainArea
{
  overflow: auto;
  padding:5px;
  height: 250px;
}

.msg
{
  text-align: left;
}
.msg b
{
  font-weight: bold;
}
.roundBorderA
{
  border: 8px outset #0E4C56;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

.roundBorderB
{
  border: solid 0px #70C1CF;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
}

.roundBorderC
{
  border: 2px solid #560F0F;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

.module
{
  margin: 10px 0px;
  overflow: auto;
}

.subtitle
{
  font-weight: bold;
  border-bottom: 1px solid #560F0F;
  padding:5px;
  height: 22px;
  overflow: hidden;
  background: #4FADBD;
  background: -moz-linear-gradient(top, #dedede, white 8%, #4FADBD 20%);  
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, #4FADBD));
  text-shadow: 3px 3px 7px #111;
}

.button1
{
  width: 70px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  margin: 10px;
  background: #0026FF;
  background: -moz-linear-gradient(top, #F9B041, #0026FF 8%, #00C2FF 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(8%, #0026FF), color-stop(100%, #00C2FF));
  letter-spacing: 1px;
  font-family: @MS UI Gothic;
	text-shadow: 3px 3px 7px #111;
}


/*
------------------------------
	Impromptu
------------------------------
*/
.jqifade{
	position: absolute; 
	background-color: #777777; 
}
div.jqi{ 
	width: 400px; 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
	position: absolute; 
	background-color: #ffffff; 
	font-size: 11px; 
	text-align: left; 
	border: solid 1px #eeeeee;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 7px;
}
div.jqi .jqicontainer{ 
	font-weight: bold; 
}
div.jqi .jqiclose{ 
	position: absolute;
	top: 4px; right: -2px; 
	width: 18px; 
	cursor: default; 
	color: #bbbbbb; 
	font-weight: bold; 
}
div.jqi .jqimessage{ 
	padding: 10px; 
	line-height: 20px; 
	color: #444444; 
}
div.jqi .jqibuttons{ 
	text-align: right; 
	padding: 5px 0 5px 0; 
	border: solid 1px #eeeeee; 
	background-color: #f4f4f4;
}
div.jqi button{ 
	padding: 3px 10px; 
	margin: 0 10px; 
	background-color: #2F6073; 
	border: solid 1px #f4f4f4; 
	color: #ffffff; 
	font-weight: bold; 
	font-size: 12px; 
}
div.jqi button:hover{ 
	background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
	background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{ 
	background-color: #BF5E26;
}

.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}

.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }

.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }

.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }

.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }

.impromptuwarning .impromptu{ background-color: #aaaaaa; }
.impromptufade{
	position: absolute;
	background-color: #ffffff;
}
div.impromptu{
    position: absolute;
	background-color: #cccccc;
	padding: 10px; 
	width: 300px;
	text-align: left;
}
div.impromptu .impromptuclose{
    float: right;
    margin: -35px -10px 0 0;
    cursor: pointer;
    color: #213e80;
}
div.impromptu .impromptucontainer{
	background-color: #213e80;
	padding: 5px; 
	color: #ffffff;
	font-weight: bold;
}
div.impromptu .impromptumessage{
	background-color: #415ea0;
	padding: 10px;
}
div.impromptu .impromptubuttons{
	text-align: center;
	padding: 5px 0 0 0;
}
div.impromptu button{
	padding: 3px 10px 3px 10px;
	margin: 0 10px;
}